<!--  -->
<template>
  <div class='vcodePage'>
    <h1 class="title">图形验证码</h1>
    <div>
      <Vcode :show="isShow" @success="onSuccess" @close="onClose" ref="Vcode" />
    </div>
    <!-- <button @click="submit">自定义图片</button>
    <div class="vcodeBox">
      <Vcode :show="isShow" @success="onSuccess" @close="onClose" ref="Vcode" :imgs="['https://img-1309087243.cos.ap-chengdu.myqcloud.com/img/idImg.png']"/>
    </div> -->
    <div class="vcodeBox">
      <el-button @click="submit">开始验证</el-button>
      <div style="width: 90%;margin-top: 10px;">
        <codeBlock :code="codeStr.htmlstr" :type='"html"'></codeBlock>
      </div>
      <div style="width: 90%;margin-top: 10px;">
        <codeBlock :code="codeStr.cssStr" :type='"css"'></codeBlock>
      </div>
      <div style="width: 90%;margin-top: 10px;">
        <codeBlock :code="codeStr.jsStr" :type='"js"'></codeBlock>
        <div style="height: 200px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
//import 《组件名称》 from '《组件路径》';
import Vcode from "vue-puzzle-vcode";
import codeBlock from '@/components/code.vue'
import { codeStr } from './js/puzzleVcode'
export default {
  name: 'TestView',
  components: { Vcode, codeBlock },
  data() {
    return {
      isShow: true,
      codeStr,
    };
  },
  methods: {
    submit() {
      this.isShow = true;
      this.$refs.Vcode.reset()
    },

    onSuccess(msg) {
      console.log(msg);
      this.isShow = true; // 通过验证后，需要手动关闭模态框
      this.$message.success("验证成功")
    },

    onClose() {
      this.isShow = true;
    },
  },
  computed: {},
  watch: {},
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(this.$refs.Vcode);
  },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.vcodePage {
  width: 100vw;
}

.title {
  width: 100%;
  text-align: center;
}

.vcodeBox {
  margin-top: 450px;
  display: flex;
  // justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 500px;
  overflow: auto;
}

.vue-puzzle-vcode.show_ {
  opacity: 1;
  pointer-events: auto;
  // width: 500px;
  height: 400px;
  margin: 0 100px;
}

.vue-puzzle-vcode {
  top: 100px;
}
</style>